/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {Renderer} from '../../renderer';
import * as pick from 'lodash/pick';
import JSONTree from 'react-json-tree';

// 只写了一部分，如果还需要其他的，前往这里https://github.com/gaearon/redux-devtools/tree/75322b15ee7ba03fddf10ac3399881e302848874/src/react/themes
const themes = {
  twilight: {
    scheme: 'twilight',
    author: 'david hart (http://hart-dev.com)',
    base00: '#1e1e1e',
    base01: '#323537',
    base02: '#464b50',
    base03: '#5f5a60',
    base04: '#838184',
    base05: '#a7a7a7',
    base06: '#c3c3c3',
    base07: '#ffffff',
    base08: '#cf6a4c',
    base09: '#cda869',
    base0A: '#f9ee98',
    base0B: '#8f9d6a',
    base0C: '#afc4db',
    base0D: '#7587a6',
    base0E: '#9b859d',
    base0F: '#9b703f'
  },
  tube: {
    scheme: 'london tube',
    author: 'jan t. sott',
    base00: '#231f20',
    base01: '#1c3f95',
    base02: '#5a5758',
    base03: '#737171',
    base04: '#959ca1',
    base05: '#d9d8d8',
    base06: '#e7e7e8',
    base07: '#ffffff',
    base08: '#ee2e24',
    base09: '#f386a1',
    base0A: '#ffd204',
    base0B: '#00853e',
    base0C: '#85cebc',
    base0D: '#009ddc',
    base0E: '#98005d',
    base0F: '#b06110'
  },
  tomorrow: {
    scheme: 'tomorrow',
    author: 'chris kempson (http://chriskempson.com)',
    base00: '#1d1f21',
    base01: '#282a2e',
    base02: '#373b41',
    base03: '#969896',
    base04: '#b4b7b4',
    base05: '#c5c8c6',
    base06: '#e0e0e0',
    base07: '#ffffff',
    base08: '#cc6666',
    base09: '#de935f',
    base0A: '#f0c674',
    base0B: '#b5bd68',
    base0C: '#8abeb7',
    base0D: '#81a2be',
    base0E: '#b294bb',
    base0F: '#a3685a'
  },
  threezerotwofour: {
    scheme: 'threezerotwofour',
    author: 'jan t. sott (http://github.com/idleberg)',
    base00: '#090300',
    base01: '#3a3432',
    base02: '#4a4543',
    base03: '#5c5855',
    base04: '#807d7c',
    base05: '#a5a2a2',
    base06: '#d6d5d4',
    base07: '#f7f7f7',
    base08: '#db2d20',
    base09: '#e8bbd0',
    base0A: '#fded02',
    base0B: '#01a252',
    base0C: '#b5e4f4',
    base0D: '#01a0e4',
    base0E: '#a16a94',
    base0F: '#cdab53'
  },
  summerfruit: {
    scheme: 'summerfruit',
    author: 'christopher corley (http://cscorley.github.io/)',
    base00: '#151515',
    base01: '#202020',
    base02: '#303030',
    base03: '#505050',
    base04: '#B0B0B0',
    base05: '#D0D0D0',
    base06: '#E0E0E0',
    base07: '#FFFFFF',
    base08: '#FF0086',
    base09: '#FD8900',
    base0A: '#ABA800',
    base0B: '#00C918',
    base0C: '#1faaaa',
    base0D: '#3777E6',
    base0E: '#AD00A1',
    base0F: '#cc6633'
  }
}

@Renderer({
  name: 'field-json',
  desc: '...',
  test: /(?:^|\/)field\/json$/
})
export default class JsonField extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    type: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
    innerClassName: PropTypes.string,
    levelExpand: PropTypes.number,
    theme: PropTypes.oneOf(['twilight', 'tube', 'tomorrow', 'threezerotwofour', 'summerfruit'])
  };

  static defaultProps = {
    innerClassName: '',
    theme: 'twilight',
    levelExpand: -1,
    expandDefaultLevel: -1
  };

  valueRenderer(raw) {
    if (typeof raw === 'string' && /^\"?https?:\/\//.test(raw)) {
      return (<a href={raw.replace(/^\"(.*)\"$/, '$1')} target="_blank">{raw}</a>);
    }
    return raw;
  }

  render() {
    const {
      value,
      innerClassName,
      theme,
      levelExpand,
      dataTip,
      expandDefaultLevel
    } = this.props;

    let rest = pick(this.props, ['className', 'onClick', 'onMouseEnter', 'onMouseLeave']);
    let data = {};
    if (value instanceof Object) {
      data = value;
    } else {
      try {
        data = JSON.parse(value);
      }catch(e){}
    }
    let props = {
      data,
      theme: themes[theme] || themes['twilight'],
      shouldExpandNode: ((keyName, data, level) => level >= 1 ? (level <= expandDefaultLevel || level <= levelExpand) : level <= levelExpand)
    };
    let body = <JSONTree {...props} valueRenderer={this.valueRenderer} />;

    return (
      <div {...rest}>
        {body}
      </div>
    );
  }
}
